<!--
 * @Author: lixiang
 * @Date: 2021-11-03 16:26:31
 * @Description: 
-->
<template>
  <el-upload :multiple=false :before-upload="beforeUpload" :http-request="createUpload" action="" drag>
    <img v-if="imageUrl" :src="imageUrl" width="50px" height="50px">
    <i v-else class="el-icon-upload" />
  </el-upload>
</template>
<script>
// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
import{fileUploadUrl}from "@/utils/common"

export default {
  props:{
    imageUrl:{
       type: String,
      default: ""
    }
  },
  watch:{
    // imageUrl:function(n,o){
    //   console.log(o)
    //   this.image_uri=n
    // }
   
  },
  data() {
    return {
      // image_uri:""
    }
  },
  created(){

  },
  mounted() {
    console.log(this.imageUrl)
  },
  methods: {
    beforeUpload() {
      // let _this = this
      //   const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M
      //   const isSize = new Promise(function (resolve, reject) {
      //     let width = 654; // 限制图片尺寸为654X270
      //     let height = 270;
      //     let _URL = window.URL || window.webkitURL;
      //     let img = new Image();
      //     img.onload = function () {
      //       let valid = img.width === width && img.height === height;
      //       valid ? resolve() : reject();
      //     }
      //     img.src = _URL.createObjectURL(file);
      //   }).then(() => {
      //     return file;
      //   }, () => {
      //     _this.$message.error('图片尺寸限制为654 x 270，大小不可超过1MB')
      //     return Promise.reject();
      //   });
      //   if (!is1M) {
      //     _this.$message.error('图片尺寸限制为654 x 270，大小不可超过1MB')
      //   }
      //   return isSize&is1M
    },
    createUpload(param){
    
     let formData = new FormData();
      formData.append("file", param.file); // 'file' 可变 相当于 input 表单的name 属性
      formData.append("bucket", 'xcyy-khd'); //'xcyy-khd'
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.axios
        .post(fileUploadUrl, formData, config)
        .then(res => {
          const imageUrl = res.data.data;
          this.$emit('changeImage', imageUrl)
        })
        .catch(() => {
          this.$message.error("文件上传失败,请检查网络");
        });
    }
  }
}
</script>
<style lang="less" scoped>

</style>
